/*header*/
#header
  display: flex
  justify-content: center
  width: 100%
  height: 40px
  background-color: #333
  .center
    width: 1226px
    height: 40px
    flex-shrink: 0
    display: flex
    justify-content: space-between
    align-items: center
    ul
      li
        a
          display: flex
          align-items: center
          height: 12px
          font-size: 12px
          color: #b0b0b0
          padding: 0 8px
          border-right: 1px solid #b0b0b0

        &:last-of-type
          a
            border-right: none
    .fl
      flex-shrink: 0
      display: flex
      width: 612px
    .fr
      display: flex
      height: 40px
      .user
        width: 120px
        height: 40px
        line-height 40px
        font-size 12px
        text-align: center
        position relative
        &:hover
          .username
            color:#ff6700
            background-color: #fff
          .selector
            padding: 7px 0
            height 120px
        .username
          display: block
          width: 100%
          height: 100%
          line-height: 40px
          color: #b0b0b0
          position relative
          z-index 201
        .selector
          position absolute
          left 0
          top 40px
          width: 100%
          z-index 200
          box-shadow 0 2px 10px rgba(0,0,0,0.15)
          height: 0
          background-color: #fff
          overflow hidden
          transition all 0.2s
          li
            width 100%
            height 30px
            &:hover
              a
                color:#ff6700
                background-color: #fafafa
            a
              display: block
              width 100%
              height 100%
              line-height: 30px
              padding: 0
              border 0

      >ul
        display: flex
        align-items: center
        height: 100%
      .shopcart
        display: flex
        width: 120px
        font-size: 12px
        color: #fff
        margin: 0 20px
        justify-content: center
        align-items: center
        background-color: #ff6700


#content
  display: flex
  justify-content: center
  flex-wrap: wrap
  width: 100%
  #nav
    width: 100%
    height: 100px
    flex-shrink: 0
    position relative
    .banner_x
      width: 1226px
      height: 100%
      display flex
      & > a
        display: block
        height: 100%
      .logo
        width: 50px
        text-indent: -10000px
        background: url("../image/nav/logo_top.png") no-repeat
        background-size: 100%
        background-position: center

      .gif
        width: 180px
        background: url("../image/nav/yyymix.gif") no-repeat
        background-size: 100%
        background-position: center

      .list
        display: flex
        height: 100%
        & > li
          display: flex
          align-items: center
          margin: 0 10px
          font-size: 16px
          &:hover
            a
              color: #ff6700

      .fr
        display: flex
        justify-content flex-end
        align-items: center
        height: 100%
        flex-grow 1
        .button
          box-sizing: border-box
          width: 50px
          height: 50px
          background-color: #fff
          border: 1px solid #ccc
          text-align: center
          line-height: 50px
          font-size: 18px
          font-weight: bold
          cursor: pointer
          &:active
            background-color: #ff6700
            color: #fff
        .search
          position relative
          .text
            box-sizing: border-box
            width: 250px
            height: 50px
            border: 1px solid #ccc
            padding: 0 10px
            &:focus
              outline: none
              border 1px solid #ff6700
              ~ .keyword_list
                display: block
          .search_hot
            position absolute
            top: 16px
            right: 12px
            a
              float left
              display block
              font-size 12px
              height 18px
              line-height 18px
              margin-left 5px
              padding 0 5px
              background-color: #eee
              color #757575
              transition all .2s
              &:hover
                color #fff
                background-color: #ff6700
          .keyword_list
            display none
            position absolute
            top: 50px
            left: 0
            z-index 100
            width 250px
            box-sizing border-box
            border 1px solid #ff6700
            li
              position relative
              box-sizing border-box
              width: 100%
              height 30px
              padding 6px 15px
              background-color: #fff
              &:hover
                background-color: #fafafa
              a
                display block
                width 100%
                height 100%
                font-size 12px
                .result
                  float: right
                  color: #b0b0b0

  #banner
    width: 1226px
    flex-shrink: 0
    height: 460px
    background-color: #ccc
    #cate_menu
      width: 234px
      height: 100%
      background-color: #0c0c13
      box-sizing: border-box
      position: relative
      & > ul
        position relative
        padding: 20px 0
        &:hover
          li:last-of-type
            display block
        & > li
          display: flex
          align-items: center
          height: 40px
          padding: 0 30px
          font-size: 14px
          &:last-of-type
            display: none
            padding: 0
            width: 800px
            height: 461px
            z-index: 2
            position: absolute
            left 100%
            top 0
          &:hover
            background-color: #ff6700
          a
            color: #fff
            margin-left: 10px
          .pop
            box-shadow: 2px 3px 5px #ccc
            width: 800px
            height: 461px
            background-color: #fff
            padding: 20px 0 0 20px
            font-size 12px
            box-sizing border-box
            & > li
              margin-bottom: 10px
              white-space nowrap
              .title
                float: left
                width 70px
                height 20px
                line-height 20px
                font-weight bold
                .iconfont
                  font-size 12px
              .list
                float: left
                max-width 700px
                li
                  float: left
                  margin-top 2px
                  margin-bottom 5px
                  a
                    display block
                    height 16px
                    margin-left: 0
                    line-height 16px
                    white-space nowrap
                    padding 0 10px
                    text-align center
                    color #666
                    border-left 1px solid #e0e0e0
                    &:hover
                      color: #ff6700

    .swiper-container
      width: 992px
      height: 100%
      .swiper-wrapper
        .swiper-slide
          img
            width: 100%
            height: 100%
  #sub_banner
    display: flex
    width: 1226px
    flex-shrink: 0
    justify-content: space-between
    height: 170px
    margin-top: 15px
    .selector
      width: 234px
      height: 100%
      .sidebar
        float: left
        display: block
        width: 78px
        height: 85px
        img
          opacity: 0.8
          &:hover
            opacity: 1

    .bigImg
      width: 316px
      height: 100%
      a
        display: block
        width: 100%
        height: 100%
        img
          width: 100%
          height: 100%
          opacity: 0.8
          &:hover
            opacity: 1

  #flash
    width: 1226px
    flex-shrink: 0
    height: 398px
    margin-top: 20px
    & > h2
      height: 58px
      line-height: 58px
    ul
      display: flex
      justify-content: space-between
      li
        width: 234px
        height: 340px
        background-color: #fafafa
        border-top: 1px solid orange
        &:nth-child(2)
          border-color: green

        &:nth-child(3)
          border-color: blue

        &:nth-child(4)
          border-color: red

        &:nth-child(5)
          border-color: teal

        a
          display: block
          font-size: 14px
          text-align: center
          img
            width: 160px
            height: 160px
            opacity: 0.8
            margin: 37px

          .discount
            font-size: 12px
            color: #b0b0b0
            margin: 15px 0

          .price
            color: #ff6709

          &:hover
            img
              opacity: 1

    .time
      background-color: #f1eded
      .name
        margin-top 53px
        font-size 21px
        color: #ef3a3b
      img
        width 34px
        height 53px
      .text
        font-size 15px
        color: rgba(0, 0, 0, 0.54)
      .flashTime
        margin 28px 33px 0
        color #fff
        font-size: 24px
        line-height 46px
        display: flex
        justify-content center
        .box
          width: 46px
          height: 46px
          background-color: #605751
        .dosh
          height: 46px
          font-size: 28px
          color: #605751

  #recommend
    width: 1226px
    position relative
    flex-shrink: 0
    height: 672px
    margin-top: 20px
    background-color: #f5f5f5
    & > h2
      height: 58px
      line-height: 58px
    .more
      position absolute
      top 18px
      right 30px
      &:hover
        color red
    ul
      display: flex
      height: 614px
      justify-content: space-between
      align-content: space-between
      flex-wrap: wrap
      li
        width: 234px
        height: 300px
        background-color: #fff
        &:nth-child(1) .bigImg, &:nth-child(6) .bigImg
          width: 100%
          height: 100%
          margin: 0
        &:hover
          box-shadow: 0px 0px 30px #ccc
          .comment
            transform: translateY(0)
        a
          display: flex
          flex-direction: column
          align-items: center
          font-size: 14px
          text-align: center
          width: 100%
          height: 100%
          position: relative
          overflow: hidden
          .info
            width: 65px
            height: 20px
            text-align: center
            line-height: 20px
            color: #fff
            font-size: 10px

          .new
            background-color: #83c44e

          .discount
            background-color: red

          & > p
            height: 25px
            line-height: 25px
            font-size: 14px

          .price
            color: #ff6700

          .counter
            height: 15px
            line-height: 15px
            color: #aaa
            font-size: 12px

          img
            width: 160px
            height: 160px
            margin: 10px 0 20px

          .comment
            position: absolute
            bottom: 0
            left: 0
            right: 0
            transform: translateY(101%)
            transition: transform 0.4s
            box-sizing: border-box
            height: 70px
            padding: 10px 0 0 30px
            background-color: #ff6700
            color: #fff
            text-align: left
            p
              font-size: 12px
              margin-top: 5px
#footer
  display: flex
  flex-direction: column
  justify-content: flex-end
  align-items: center
  height: 120px
  margin-top: 20px
  padding: 30px 0
  font-size: 12px
  p
    height: 30px

